import { defineComponent, ref, PropType } from 'vue'
import { fetchWorkbenchRemindTypeList } from '@src/api/WorkbenchApi'
import { CreateElement } from 'vue'
import './style.scss'
import i18n from '@src/locales';
export enum ModalType {
    Tip = 'tip',
    Recharge = 'recharge'
}

interface ModalAttrs {
    title?: string,
    show?: boolean,
}

export default defineComponent({
    props: {
        type: {
            type: String as PropType<String>,
            default: ()=> 'tip',
            required: true
        }
    },
    expose: ['handleConfirm', 'closeDialog', 'handleShowModal'],
    setup(props, ctx) {
      const { type } = props
      const modalAttrs = ref<ModalAttrs>({})
      const remindValue = ref(0)
      const remindTypeList = ref<Record<string, any>[]>([])

      const handleConfirm = ()=> {
        ctx.emit('handleConfirm', remindValue.value)
      }

      const closeDialog = ()=> {
        modalAttrs.value.show = false
      }

      const handleShowModal = async ({ title = '' } = {})=> {
      
        if(type === ModalType.Tip) {
            await fetchRemindTypeList()
        }

        modalAttrs.value = {
            title,
            show: true
        }

      }

      const fetchRemindTypeList = async ()=> {
        const rs = await fetchWorkbenchRemindTypeList({})
        remindTypeList.value = rs?.data || []
      }

      return {
        modalAttrs,
        remindValue,
        remindTypeList,
        handleShowModal,
        handleConfirm,
        closeDialog
      }
    },
    render(h: CreateElement) {
        const { modalAttrs, closeDialog, type, remindValue, handleConfirm, remindTypeList } = this
        return (
            <base-modal props={{...modalAttrs}} onClose={closeDialog} width="480px">
                {this.$slots.default ? this.$slots.default : (
                     type === ModalType.Tip ? (
                        <div class="remind-box">
                          <el-radio-group value={remindValue} class="flex" onInput={(val)=> this.remindValue = val}>
                            {remindTypeList.map((item: Record<string, any>)=> <el-radio label={item.value}>{item.remindMode}</el-radio>)}
                          </el-radio-group>
                        </div>
                     ): (
                        <div class="recharge-box">
													 <div>{ i18n.t('customer.idCard.tipTitle') }</div>
													 <div>{ i18n.t('customer.idCard.tipTitle2') }</div>
                        </div>
                     )
                )}
                <div slot="footer" class="dialog-footer">
                    {
                        type === ModalType.Tip ? (
                            <div>
                                <el-button onClick={closeDialog}>{ i18n.t('common.base.cancel') }</el-button>
                                <el-button type="primary" onClick={handleConfirm}>{ i18n.t('common.base.makeSure') }</el-button>
                            </div>
                        ) : (
                            <el-button onClick={closeDialog}>{ i18n.t('common.base.iKnow') }</el-button>
                        )
                    }
                </div>
            </base-modal>
        )
    }
})